<template>
  <view class="custom-content">
    <view style="width: 100vw;padding: 0;margin: 0;display: block;">
      <video id="myVideo" style="width: 750rpx; height: 460rpx; display: block" src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4" @error="videoErrorCallback" :controls="false"></video>
      <view class="video-control-bar control-bar-1">
        <image src="/static/images/icons/player/play_1.png" style="width: 58.5rpx; height: 58.5rpx"></image>
        <image src="/static/images/icons/player/volume_2.png" style="width: 58.5rpx; height: 58.5rpx"></image>
        <image src="/static/images/icons/player/speed_1.png" style="width: 58.5rpx; height: 58.5rpx"></image>
        <image src="/static/images/icons/player/hd.png" style="width: 58.5rpx; height: 58.5rpx"></image>
        <image src="/static/images/icons/player/full-screen_1.png" style="width: 58.5rpx; height: 58.5rpx" @click="fullScreen"></image>
      </view>
	  <view class="video-control-bar control-bar-2">
        <image src="/static/images/icons/icon-15_1.png" style="width: 58.5rpx; height: 58.5rpx"></image>
        <image src="/static/images/icons/icon-15_6.png" style="width: 58.5rpx; height: 58.5rpx"></image>
        <image src="/static/images/icons/icon-15_2.png" style="width: 58.5rpx; height: 58.5rpx"></image>
        <image src="/static/images/icons/icon-15_3.png" style="width: 58.5rpx; height: 58.5rpx"></image>
        <image src="/static/images/icons/icon-15_4.png" style="width: 58.5rpx; height: 58.5rpx"></image>
        <image src="/static/images/icons/icon-15_5.png" style="width: 58.5rpx; height: 58.5rpx"></image>
      </view>

		<view class="video-control-bar control-bar-3">
			<image src="/static/images/icons/control-bar.png" style="width: calc(100vh - 122.08rpx - 100.47rpx - 460rpx); height: 384rpx" mode="aspectFit"></image>
		</view>
    </view>

  </view>
</template>

<script setup>
import { ref } from 'vue'
const videoErrorCallback = function (e) {
  console.log('视频错误信息:', e.detail.errMsg)
}

const fullScreen = () => {
	console.log('123333')
  uni.navigateTo({
    url: '/pages/index/device-view_landscape/index'
  })
}
// #ifdef APP-PLUS
plus.screen.unlockOrientation();
plus.screen.lockOrientation("portrait-primary");
plus.navigator.setFullscreen(false)
plus.navigator.showSystemNavigation()
// #endif
</script>

<style lang="scss" scoped>
.custom-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.video-control-bar {
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.control-bar-1 {
  background: #ee490d;
  background-image: linear-gradient(90deg, #ff6623 17%, #f22e40 91%);
	width: 750rpx;
  height: 100.47rpx;
}
.control-bar-2 {
	width: 750rpx;
	height: 122.08rpx;
	background: #FFFFFF;
}

.control-bar-3 {
	margin-top:27rpx;
	width: 750rpx;
	background: #FFFFFF;
	padding: 76rpx;
}
</style>
